<template>
  <div>
    <h2>图书管理</h2>
    <div class="book-list">
      <div class="book" v-for="book in books" :key="book.id">
        <img :src="book.image" :alt="book.title">
        <div class="book-info">
          <h3>{{ book.title }}</h3>
          <p>作者: {{ book.author }}</p>
        </div>
        <div class="actions">
          <button @click="borrowBook(book)" :disabled="book.isBorrowed">借书</button>
          <button @click="returnBook(book)" :disabled="!book.isBorrowed">还书</button>
        </div>
      </div>
    </div>
    <form @submit.prevent="addBook">
      <input v-model="newBook.title" placeholder="书名" required>
      <input v-model="newBook.author" placeholder="作者" required>
      <!-- 假设每本书的图片由用户输入图片链接来添加 -->
      <input v-model="newBook.image" placeholder="图片链接" required>
      <button type="submit">添加书籍</button>
    </form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      books: [
        { id: 1, title: '孙子兵法', author: '许朝强', image: require('@/assets/img.png'), isBorrowed: false },
        { id: 2, title: '情商高就是会说话', author: '芬达', image: require('@/assets/img_1.png'), isBorrowed: false },
        { id: 1, title: '龙族', author: '许朝强', image: require('@/assets/img_2.png'), isBorrowed: false },
        { id: 2, title: '高等数学', author: '芬达', image: require('@/assets/img_3.png'), isBorrowed: false }
        // 可以添加更多书籍
      ],
      newBook: {
        id: '',
        title: '',
        author: '',
        image: '',
        isBorrowed: false
      },
    };
  },
  methods: {
    borrowBook(book) {
      book.isBorrowed = true;
    },
    returnBook(book) {
      book.isBorrowed = false;
    },
    addBook() {
      this.newBook.id = this.books.length + 1;
      this.books.push({ ...this.newBook });
      this.newBook.title = '';
      this.newBook.author = '';
      this.newBook.image = '';
    }
  }
}
</script>

<style>
.book-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  padding: 0;
  margin: 0;
  list-style-type: none;
}
.book {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 10px;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
  width: 150px; /* 您可以根据需要调整宽度 */
}
.book img {
  max-width: 100%;
  height: auto;
  border-radius: 4px;
}
.actions button {
  margin: 5px;
}
</style>